<template>
    <div>
      <div>
        <div class="fxtop">
          <van-icon name="arrow-left" class="fxdajiant" />
          <p class="find">Find</p>
          <van-icon name="search" class="fxsousuo" />
        </div>
        <div>
          <van-tabs v-model="active">
          <van-tab title="购你好看">
              <div class="fxd">
                <div v-for="(v,index) in fxarr" :key="index" class="fxwb">
                <img :src="v.img1" alt="" class="imgs">
                <p class="fximg2"><img :src="v.img2" alt=""></p>
                <p class="fxpp">{{v.imgp}}</p>
                </div>
              </div>
          </van-tab>
          <van-tab title="好货清单">
            <div class="rmqd">
              <div class="rmqdone">热门清单</div>
              <div class="zuoyouhua">
                <div class="tupianss">
                  <img src="//static.asus.com.cn/store/20230203/14260157511025.jpg" alt="">
                  <p>一台颜值与实力都在线的轻薄本</p>
                </div>
                <div class="tupianss">
                  <img src="//static.asus.com.cn/store/20230203/13484398571005.jpg" alt="">
                  <p>无惧多任务运行挑战高性能轻薄本</p>
                </div>
              </div>
              <div class="shangsss">
                <div class="rmqdone">清单文章</div>
                <div>
                  <div class="ddddddd">
                    <div class="hhuo">
                      <img src="//static.asus.com.cn/static/wap/img/user.png" alt=""><p class="wyps">好货清单</p><p>2023-02-03</p>
                    </div>
                    <div class="fxdtp">
                      <img src="//static.asus.com.cn/store/20230203/14260157511025.jpg" alt="">
                      <p>一台颜值与实力都在线的轻薄本</p>
                      <p class="xiaosj">A4纸大小轻薄长续航的笔记本</p>
                      <div><span class="fxzuo"><van-icon name="eye-o" />17</span><span class="fxyou"><van-icon name="other-pay" />0</span></div>
                    </div>
                  </div>
                  <div class="ddddddd">
                    <div class="hhuo">
                      <img src="//static.asus.com.cn/static/wap/img/user.png" alt=""><p class="wyps">好货清单</p><p>2023-02-03</p>
                    </div>
                    <div class="fxdtp">
                      <img src="//static.asus.com.cn/store/20230203/13484398571005.jpg" alt="">
                      <p>无惧多任务运行挑战高性能轻薄本</p>
                      <p class="xiaosj">为精英人群高效办公提供非凡助力</p>
                      <div><span class="fxzuo"><van-icon name="eye-o" />11</span><span class="fxyou"><van-icon name="other-pay" />0</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="买家秀">暂无内容</van-tab>
          <van-tab title="A！有内容"><faxianneirong></faxianneirong></van-tab>
        </van-tabs>
        </div>
      </div>
      <buttom></buttom>
    </div>
  </template>
  
  <script>
  import buttom from './zujian/buttom.vue'
  import faxianneirong from './yonghus/faxianneirong.vue'
  export default {
    data() {
      return {
        active: 1,
        fxarr:"",
        neirong:""
      }
    },
    components:{
          buttom,
          faxianneirong
    },
    methods:{
    },
    mounted(){
      this.$http({
            url:"http://localhost:3000/find",
            method:"get"
        }).then(res=>{
            this.fxarr = res.data[0].data.data1;
        })  
    },
    created(){
      
    }
  }
  </script>
  
  <style scoped>
  .ddddddd{
    margin: 8vw auto;;
    width: 94vw;
    box-shadow: 5px 5px 5px #e7e0e0;
    border:1px solid #ede3e3;

  }
  .fxyou{
    margin-left: 10vw;
  }
  .fxzuo{
    margin-left: 60vw;
  }
  .xiaosj{
    opacity: 0.5;
    margin: 2.5vw 0;
  }
  .fxdtp p{
    padding: 0vw 3vw;
  }
  .fxdtp img{
    width: 88vw;
  }
  .fxdtp{
    width: 94vw;
    margin: 3vw;
  }
  .wyps{
    flex-grow: 1;
  }
  .hhuo{
    display: flex;
    height: 13vw;
    line-height: 13vw;
    padding: 1vw 3vw;
  }
  .hhuo img{
    width: 11vw;
    height: 11vw;
    margin-right: 2vw;
  }
  .shangsss{
    margin-top: 6vw;
  }
  .tupianss p{
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 2vw 0 2vw;
  }
  .tupianss{
    width: 60vw;
    height: 49vw;
    font-size: 5vw;
    text-align: center;  
    margin: 2vw 6vw 0 0;
    box-shadow: 5px 5px 5px #e7e0e0;
    border:1px solid #ede3e3;
  }
  .rmqdone{
    width: 100vw;
    height: 13vw;
    text-align: center;
    line-height: 13vw;
    font-size: 5.5vw;
  }
  .zuoyouhua{
    width: 90.66666667vw;
    height: 54vw;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    overflow: scroll;
    flex-wrap: nowrap;
  }
  .rmqd{
    width: 100vw;
    height: 72vw;
  }
  .tupianss img{
    width: 60vw;
  }
  .fxsousuo{
    font-size: 6vw;
    margin: 3vw 3vw 0 0;
  }
  .fxdajiant{
    font-size: 6vw;
    margin: 3vw 0 0 3vw;
  }
  .find{
    flex-grow: 2;
    text-align: center;
    line-height: 13vw;
    font-size: 5vw;
  }
  .fxpp{
    padding: 2vw;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fximg2{
    position: absolute;
    left: 13vw;
    top:8vw
  }
  .fximg2 img{
    width: 17vw;
  }
  .fxd{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 14vw;
    
  }
  .fxwb{
    width: 45.5vw;
    /* height: 30vw; */
    margin: 4vw 0 0 3vw;
    position: relative;
    border: 1px solid #0000004d;
    box-shadow: 3px 3px #0000003e;
  }
  .fxtop{
    display: flex;
    width: 100vw;
    height: 13vw;
  }
  .imgs{
    width: 45.5vw;
    height: 32vw;
  }
  </style>